<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <div class="head-container">
          <!-- 搜索 -->
          <el-select
            v-model="query.type"
            placeholder="请选择任务类型"
            class="filter-item"
            size="mini"
            style="margin-bottom: 10px;"
          >
            <el-option v-for="item in dict.task_type" :key="item.id" :label="item.label" :value="+item.value" />
          </el-select>

          <rrOperation />
        </div>
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
        <el-form-item label="任务标题" prop="title">
          <el-input v-model="form.title" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="任务类型" prop="type">
          <el-select v-model="form.type" style="width: 100%;">
            <el-option v-for="item in dict.task_type" :key="item.id" :label="item.label" :value="+item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示" prop="ifShow">
          <el-select v-model="form.ifShow" style="width: 100%;">
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>

        <el-form-item label="上限次数" prop="limitAmount">
          <el-input-number v-model="form.limitAmount" controls-position="right" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" controls-position="right" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="任务图标" prop="coverImg">
          <el-upload
            v-loading="coverImg_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params) => uploadRequest(params, 'coverImg')"
            :show-file-list="false"
          >
            <img v-if="form.coverImg" :src="form.coverImg" class="avatar" />
            <div v-else class="upload-text">选择图片</div>
          </el-upload>
          <el-input v-show="false" v-model="form.coverImg" />
        </el-form-item>
        <el-form-item label="任务详情" prop="detailImg">
          <el-upload
            class="upload-demo"
            :file-list="fileList"
            :http-request="(params) => uploadDetailRequest(params, 'detailImg')"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            @on-change="detailImgchange"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <el-input v-show="false" v-model="form.detailImg" />
        </el-form-item>
        <el-form-item label="任务内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="4" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="coverImg" label="任务图标">
        <template slot-scope="scope">
          <img :src="scope.row.coverImg" style="width: 80px;height: 80px;" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="任务标题" />
      <el-table-column prop="type" label="任务类型">
        <template slot-scope="scope">
          <span>{{ selectDictLabel(dict.task_type, scope.row.type) }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="content" label="任务内容" />
      <el-table-column prop="ifShow" label="是否显示">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.ifShow === 1 ? "是" : "否" }}</span> -->
          <el-switch :value="scope.row.ifShow" @change="(bol) => toChange(scope.row, bol)"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="limitAmount" label="上限次数" />
      <el-table-column
        v-if="checkPer(['admin', 'serverDeploy:edit', 'serverDeploy:del'])"
        label="操作"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudTask from "@/api/mini/task";
import { changeTaskStatus } from "@/api/mini/task";
import { uploadFile } from "@/api/data";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
const defaultForm = {
  title: "",
  type: "",
  ifShow: "",
  limitAmount: "",
  sort: "",
  coverImg: "",
  content: "",
  id: "",
};
export default {
  name: "Task",
  dicts: ["task_type"],
  components: { pagination, crudOperation, rrOperation, udOperation },
  cruds() {
    return CRUD({
      title: "任务",
      url: "/api/task/taskList",
      listMethod: "post",
      listKey: ["data", "list"],
      totalKey: ["data", "total"],
      crudMethod: { ...crudTask },
      query: { type: 1 },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      accountList: [],
      accountMap: {},
      loading: false,
      coverImg_loading: false,
      fileList: [],
      permission: {
        add: ["admin", "proportion:add"],
        edit: ["admin", "proportion:edit"],
        del: ["admin", "proportion:del"],
      },
      rules: {
        type: [{ required: true, message: "请选择任务类型", trigger: "blur" }],
        title: [{ required: true, message: "任务标题不能为空", trigger: "blur" }],
        ifShow: [{ required: true, message: "请选择是否显示", trigger: "blur" }],
        limitAmount: [{ required: true, message: "请输入上限参数", trigger: "blur" }],
        content: [{ required: true, message: "任务内容不能为空", trigger: "blur" }],
        coverImg: [{ required: true, message: "请上传任务图标", trigger: "blur" }],
      },
    };
  },
  methods: {
    toChange(row, val) {
      console.log(row);
      this.$confirm(row.ifShow ? "是否关闭" : "是否开启" + ", 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        changeTaskStatus(row.id).then((res) => {
          this.$message.success("修改成功");
          this.crud.toQuery();
        });
      });
    },
    detailImgchange() {
      console.log("this.fileList :>> ", this.fileList);
    },

    uploadRequest(params, key) {
      console.log("params :>> ", params);
      this[`${key}_loading`] = true;
      uploadFile(params).then((res) => {
        console.log("res :>> ", res);
        this[`${key}_loading`] = false;
        this.form[key] = res.data;
        this.$set(this.form, key, res.data);
      });
    },
    uploadDetailRequest(params, key) {
      uploadFile(params).then((res) => {
        this.fileList.push({ name: params.file.name, url: res.data });
        this.form[key] = this.fileList.map((item) => item.url).join(",");
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
